<template>
  <div class="search-page">
    <!-- 搜索栏区域 -->
    <div class="search-header">
      <SearchBar @search="confirmCallback"></SearchBar>
    </div>

    <!-- 主要内容区域 -->
    <div class="search-content">
      <!-- 搜索结果统计 -->
      <div class="search-stats" v-if="roomList?.length">
        <div class="stats-info">
          <van-icon name="location-o" class="stats-icon" />
          <span class="stats-text">为您找到 {{ roomList.length }} 套房源</span>
        </div>
        <div class="filter-tags">
          <van-tag 
            v-if="hasActiveFilters" 
            type="primary" 
            size="medium"
            @click="clearFilters"
            closeable
          >
            筛选条件
          </van-tag>
        </div>
      </div>

      <!-- 房源列表 -->
      <div class="room-list-container">
        <PullDownRefreshContainer
          :request="getRoomListHandler"
          ref="pullDownRefreshContainerRef"
          class="min-h-[60vh]"
        >
          <template v-if="roomList?.length">
            <div class="room-grid">
              <div 
                v-for="(item, index) in roomList"
                :key="item.id"
                class="room-item"
                :style="{ animationDelay: `${index * 0.1}s` }"
              >
                <RoomCard :data="item"></RoomCard>
              </div>
            </div>
          </template>
          
          <!-- 空状态 -->
          <template v-else>
            <div class="empty-state">
              <van-empty 
                image="search" 
                description="暂无房源信息"
                class="empty-content"
              >
                <template #description>
                  <div class="empty-text">
                    <p>暂时没有找到符合条件的房源</p>
                    <p class="empty-tip">试试调整筛选条件或搜索其他区域</p>
                  </div>
                </template>
                <van-button 
                  type="primary" 
                  size="small" 
                  round
                  @click="resetSearch"
                  class="empty-button"
                >
                  重新搜索
                </van-button>
              </van-empty>
            </div>
          </template>
        </PullDownRefreshContainer>
      </div>
    </div>


  </div>
</template>

<script setup lang="ts" name="Search">
import SearchBar from "@/components/SearchBar/SearchBar.vue";
import type { RoomInterface, RoomListQueryInterface } from "@/api/search/types";
import { ref, computed } from "vue";
import { getRoomList } from "@/api/search";
import PullDownRefreshContainer from "@/components/PullDownRefreshContainer/PullDownRefreshContainer.vue";
import type { ReqPage } from "@/api/types";
import RoomCard from "@/components/RoomCard/RoomCard.vue";
import { showToast } from "vant";

// 搜索参数
const searchParams = ref<Partial<RoomListQueryInterface>>({});
const pullDownRefreshContainerRef =
  ref<InstanceType<typeof PullDownRefreshContainer>>();
// 房间列表
const roomList = ref<RoomInterface[]>([]);

// 计算是否有活跃的筛选条件
const hasActiveFilters = computed(() => {
  return Object.keys(searchParams.value).length > 0;
});

// 点击查找，搜索条件
function confirmCallback(params: RoomListQueryInterface) {
  //    收集参数，调用接口
  let targetObi = {};
  //   去除空值
  for (let key in params) {
    if ((params as any)[key] !== "") {
      (targetObi as any)[key] = (params as any)[key];
    }
  }
  searchParams.value = targetObi;
  pullDownRefreshContainerRef.value?.onRefresh();
}

// 分页获取房间的信息
async function getRoomListHandler(pageInfo: ReqPage) {
  //   调用接口
  const { data } = await getRoomList({ ...searchParams.value, ...pageInfo });
  console.log("pageInfo.current", pageInfo.current);
  if (pageInfo.current === 1) {
    roomList.value = data.records;
  } else {
    roomList.value = [...roomList.value, ...data.records];
  }
  pullDownRefreshContainerRef.value?.setFinished(
    roomList.value.length >= data.total
  );
}

// 清除筛选条件
const clearFilters = () => {
  searchParams.value = {};
  pullDownRefreshContainerRef.value?.onRefresh();
  showToast("已清除筛选条件");
};

// 重新搜索
const resetSearch = () => {
  searchParams.value = {};
  pullDownRefreshContainerRef.value?.onRefresh();
};


</script>

<style scoped lang="less">
.search-page {
  min-height: 100vh;
  background: linear-gradient(180deg, #f8f9fa 0%, #ffffff 100%);
}

.search-header {
  position: sticky;
  top: 0;
  z-index: 100;
  background: white;
  box-shadow: 0 2px 12px rgba(0, 0, 0, 0.08);
  border-radius: 0 0 16px 16px;
}

.search-content {
  padding: 16px;
}

.search-stats {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 16px;
  padding: 12px 16px;
  background: white;
  border-radius: 12px;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.06);
}

.stats-info {
  display: flex;
  align-items: center;
  gap: 8px;
}

.stats-icon {
  color: #667eea;
  font-size: 16px;
}

.stats-text {
  font-size: 14px;
  color: #2c3e50;
  font-weight: 500;
}

.filter-tags {
  display: flex;
  gap: 8px;
}

.room-list-container {
  background: transparent;
}

.room-grid {
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.room-item {
  animation: slideInUp 0.6s ease-out both;
  transform: translateY(20px);
  opacity: 0;
}

@keyframes slideInUp {
  to {
    transform: translateY(0);
    opacity: 1;
  }
}

.empty-state {
  display: flex;
  justify-content: center;
  align-items: center;
  min-height: 50vh;
  padding: 40px 20px;
}

.empty-content {
  background: white;
  border-radius: 16px;
  padding: 40px 20px;
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.08);
}

.empty-text {
  margin: 16px 0;
  text-align: center;
  
  p {
    margin: 8px 0;
    color: #7f8c8d;
    font-size: 14px;
    
    &:first-child {
      color: #2c3e50;
      font-size: 16px;
      font-weight: 500;
    }
  }
}

.empty-tip {
  font-size: 12px !important;
  color: #bdc3c7 !important;
}

.empty-button {
  margin-top: 16px;
  background: linear-gradient(45deg, #667eea, #764ba2);
  border: none;
}

// 响应式设计
@media (max-width: 480px) {
  .search-content {
    padding: 12px;
  }
  
  .search-stats {
    flex-direction: column;
    gap: 12px;
    align-items: flex-start;
  }
  
  .room-grid {
    gap: 12px;
  }
}
</style>
